<template>
	<div class="right-panel">
		<img src="@img/global/panel-bottom.png" alt="" class="bg" />
		<SubTitle title="突发事件信息" img="global/设备信息.png" />
		<EquipmentInfo />
		<EquipmentStatus />
		<EquipmentEnergy />
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import EquipmentInfo from './EquipmentInfo.vue'
	import EquipmentStatus from './EquipmentStatus.vue'
	import EquipmentEnergy from './EquipmentEnergy.vue'
</script>

<style lang="scss" scoped>
	.right-panel {
		position: relative;
		flex: 1;
		padding: 0 23px;
		box-sizing: border-box;
	}
	.bg {
		position: absolute;
		width: calc(100% - 46px);
		height: 40px;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20px;
	}
</style>
